<template>
  <div class="box" >
   <h2 >TODOLIST</h2>
   <input v-model="newlist" placeholder="请输入待办事项" class="todolist">
   <button @click="addlist" class="button">增加</button>
    <div v-for="(list, index) in lists" :key="index" class="list-box" 
    @dblclick="changelist(index)" >  
      <img src="@/assets/images/勾选.jpg"  class="finish-button" @click="finishButton" >  
      <div v-if="list" class="list-style" :class="{ active: todoStore.active == true }"  >{{ list}}</div>  
        <input v-else type="text" v-model="message" 
        @keyup.enter="savelist(index,message)" class="list-style"
        :class="{ active: todoStore.active == true }" > 

        <img src="@/assets/images/垃圾桶.jpg" @click="deletelist(index)"  class="rubbish-bin">
    </div>    
  </div>
</template>   
<script lang="ts" setup>
import { useListData } from './todolist';
const {
  newlist,
  lists,
  message,
  todoStore,
  addlist,
  deletelist,
  changelist,
  savelist,
  finishButton,
} = useListData(); 
</script>
<style lang="scss" scoped>
@import "./todolist.scss";
</style>